<template>

    <el-row>
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="queryParams.roleName" placeholder="请输角色名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="pageQueryList">搜索</el-button>

            </el-form-item>
        </el-form>
    </el-row>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="toAdd">新增</el-button>
        </el-col>

    </el-row>

    <el-row v-loading="loading">

        <el-table :data="tableData" align="center">


            <el-table-column type="index" label="序号" width="120" />
            <el-table-column prop="roleName" label="角色名称" />

            <el-table-column prop="createtime" label="用户创建时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <!-- 修改按钮 -->
                    <el-button size="small" link type="primary" icon="Edit"
                        @click="toEdit(scope.row.roleId)">修改</el-button>

                    <!-- 删除按钮 -->
                    <el-button size="small" link type="primary" icon="DeleteFilled"
                        @click="pageRemoveById(scope.row.roleId)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
            v-model:page-size="queryParams.size" v-model:current-page="queryParams.current"
            @current-change="pageQueryList" @size-change="pageQueryList"
            :page-sizes="[2, 3, 5, 10, 20, 30, 40, 50, 100]" />
    </el-row>


    <el-dialog v-model="showEdit" title="角色编辑" style="width: 800px;">
        <Edit v-if="showEdit" :closeDialog="closeDialog" :editId="editId" />
    </el-dialog>





</template>

<script setup name="Role">
import { onMounted } from 'vue'

import { ref } from 'vue'

import Edit from './edit.vue'
//导入crud的API接口
import { querylist, removeById } from '@/api/permission/role/index'
import { ElMessageBox, ElNotification } from 'element-plus'


//定义数据

//表格数据
const tableData = ref([])

//表格 loading 加载状态， true 转圈， false 取消loading
const loading = ref(false);

//是否展示修改 的表单
const showEdit = ref(false)

//待修改的id
const editId = ref(0);

//查询条件
const queryParams = ref({
    roleName: '',
    size: 10,
    current: 1,
    total: 0
})


/**
 * 使用await 关键字，将返回Promise对象的异步方法变成同步方法
 */
async function pageQueryList() {
    loading.value = true
    try {
        //调用分页的接口
        const page = await querylist(queryParams.value)
        //取消加载中的转圈效果
        loading.value = false

        //获取分页数据
        tableData.value = page.records;
        queryParams.value.total = page.total;
    } catch (e) {

    }
}


/**
 * 关闭表单的 dialog ，并重新查询
 */
const closeDialog = (query) => {
    //1 关闭表单的 dialog
    showEdit.value = false

    //2 重新查询
    if (query) {
        pageQueryList();
    }

}

//跳转到 修改页面
const toEdit = (id) => {

    //设置修改的id
    editId.value = id
    //跳转到修改页面
    showEdit.value = true

}

const toAdd = () => {
    //设置修改的id
    editId.value = null
    //跳转到修改页面
    showEdit.value = true
}


//删除 按钮 点击事件 
const pageRemoveById = (id) => {

    ElMessageBox.confirm('确认删除?', 'Warning', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', })
        .then(() => {
            removeById(id).then(success => {
                ElNotification({
                    title: '消息',
                    type: 'success',
                    message: "删除成功",
                })
                pageQueryList()
            })
        })

}


//加载当前页面完成之后 查询
onMounted(() => {
    pageQueryList()
})


</script>

<style scoped></style>
